<template>
  <view class="performance-page">

    <!-- 绩效概览卡片 -->
    <view class="overview-card">
      <view class="period">2024年第一季度</view>
      <view class="rating">
        <text class="rating-label">星级评定：</text>
        <view class="stars"> 
          <view v-for="n in 5" :key="n" >
            <img v-if="n <= currentStar" src="/static/star-2.png"
            style="width: 50rpx; height: 50rpx;"  /> 
          </view>
        </view>
      </view>
      <view class="score">
        <text class="score-label">总工分：</text>
        <text class="score-value">{{ totalPoints }}</text>
      </view>
    </view>

    <!-- 工分统计 -->
    <view class="points-section">
      <view class="section-title">工分统计</view>
      <view class="points-grid">
        <view class="points-card" v-for="(item, index) in pointsData" :key="index">
          <view class="points-icon">{{ item.icon }}</view>
          <view class="points-value">{{ item.value }}</view>
          <view class="points-label">{{ item.label }}</view>
        </view>
      </view>
    </view>

    <!-- 维修任务完成情况 -->
    <view class="tasks-section">
      <view class="section-title">维修任务完成情况</view>
      <view class="task-card" v-for="(item, index) in taskMetrics" :key="index">
        <view class="task-header">
          <text class="task-name">{{ item.name }}</text>
          <text class="task-status" :class="item.status">{{ item.statusText }}</text>
        </view>
        <view class="task-progress">
          <view class="progress-info">
            <text>目标：{{ item.target }}</text>
            <text>完成：{{ item.actual }}</text>
          </view>
          <view class="progress-bar-wrapper">
            <view class="progress-bar" :style="{ width: item.progress + '%' }"></view>
          </view>
          <text class="progress-text">{{ item.progress }}%</text>
        </view>
      </view>
    </view>

    <!-- 星级评定标准 -->
    <view class="star-section">
      <view class="section-title">星级评定标准</view>
      <view class="star-list">
        <view class="star-item" v-for="(item, index) in starCriteria" :key="index">
          <view class="star-level">{{ item.level }}</view>
          <view class="star-requirements">
            <text class="requirement">{{ item.requirement }}</text>
            <text class="points-range">工分要求：{{ item.pointsRange }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 历史记录 -->
    <view class="history-section">
      <view class="section-title">历史绩效</view>
      <view class="history-list">
        <view class="history-item" v-for="(item, index) in history" :key="index">
          <view class="history-period">{{ item.period }}</view>
          <view class="history-content">
            <text class="history-star">{{ item.star }}星</text>
            <text class="history-points">{{ item.points }}工分</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 当前星级和工分
const currentStar = ref(1);
const totalPoints = ref(160);

// 工分统计数据
const pointsData = ref([
  {
    value: '156',
    label: '维修任务'
  },
  {
    value: '1',
    label: '当前星级'
  },
  {
    value: '160',
    label: '累计工分'
  },
  {
    value: '95%',
    label: '完成率'
  }
]);

// 维修任务指标
const taskMetrics = ref([
  {
    name: '日常维修任务',
    target: '150单',
    actual: '156单',
    progress: 104,
    status: 'excellent',
    statusText: '超额完成'
  },
  {
    name: '紧急维修任务',
    target: '20单',
    actual: '18单',
    progress: 90,
    status: 'good',
    statusText: '良好'
  },
  {
    name: '客户满意度',
    target: '95%',
    actual: '96%',
    progress: 101,
    status: 'excellent',
    statusText: '优秀'
  },
  {
    name: '响应时间',
    target: '≤30分钟',
    actual: '25分钟',
    progress: 120,
    status: 'excellent',
    statusText: '优秀'
  }
]);

// 星级评定标准
const starCriteria = ref([
  {
    level: '5星',
    requirement: '技术精湛，服务优质，客户满意度极高',
    pointsRange: '3000+工分'
  },
  {
    level: '4星',
    requirement: '技术熟练，服务良好，客户满意度高',
    pointsRange: '2000-2999工分'
  },
  {
    level: '3星',
    requirement: '技术合格，服务达标，客户满意度良好',
    pointsRange: '1500-1999工分'
  },
  {
    level: '2星',
    requirement: '技术基础，服务一般，需要改进',
    pointsRange: '1000-1499工分'
  },
  {
    level: '1星',
    requirement: '技术薄弱，服务较差，需要培训',
    pointsRange: '1000工分以下'
  }
]);

// 历史绩效记录
const history = ref([
  {
    period: '2023年第四季度',
    star: 4,
    points: 2650
  },
  {
    period: '2023年第三季度',
    star: 3,
    points: 2200
  },
  {
    period: '2023年第二季度',
    star: 3,
    points: 1950
  }
]);
</script>

<style>
.performance-page {
  min-height: 1200rpx;
  padding: 0 30rpx 240rpx 30rpx;
  background-color: #EFEFEF;
}

.overview-card {
  margin-top: 30rpx;
  padding: 40rpx;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  border-radius: 20rpx;
  color: #ffffff;
}

.period {
  font-size: 40rpx;
  opacity: 0.9;
  font-weight: bolder;
}

.rating {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
}

.rating-label {
  font-size: 35rpx;
  margin-right: 20rpx;
}

.stars {
  display: flex;
  align-items: center;
}

.score {
  margin-top: 20rpx;
  display: flex;
  align-items: baseline;
}

.score-label {
  font-size: 35rpx;
  margin-right: 20rpx;
}

.score-value {
  font-size: 60rpx;
  font-weight: 500;
}

.section-title {
  margin: 40rpx 0 20rpx;
  font-size: 32rpx;
  font-weight: bolder;
  color: #333333;
}

.points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.points-card {
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  text-align: center;
}

.points-icon {
  font-size: 32rpx;
  margin-bottom: 16rpx;
}

.points-value {
  font-size: 48rpx;
  font-weight: 600;
  color: #ff6b35;
  margin-bottom: 8rpx;
}

.points-label {
  font-size: 26rpx;
  color: #666666;
}

.task-card {
  margin-bottom: 20rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.task-name {
  font-size: 30rpx;
  color: #333333;
  font-weight: 500;
}

.task-status {
  font-size: 26rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.task-status.excellent {
  background-color: #e8f5ff;
  color: #4a90e2;
}

.task-status.good {
  background-color: #e8fff0;
  color: #52c41a;
}

.task-progress {
  margin-top: 16rpx;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.progress-bar-wrapper {
  height: 16rpx;
  background-color: #f5f6fa;
  border-radius: 8rpx;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff6b35 0%, #f7931e 100%);
  border-radius: 8rpx;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 8rpx;
  font-size: 26rpx;
  color: #666666;
  text-align: right;
}

.star-list {
  margin-bottom: 20rpx;
}

.star-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.star-level {
  font-size: 36rpx;
  font-weight: 600;
  color: #ff6b35;
  margin-right: 30rpx;
  min-width: 60rpx;
}

.star-requirements {
  flex: 1;
}

.requirement {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 8rpx;
}

.points-range {
  font-size: 26rpx;
  color: #666666;
}

.history-list {
  margin-bottom: 40rpx;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.history-period {
  font-size: 28rpx;
  color: #333333;
}

.history-content {
  display: flex;
  align-items: center;
}

.history-star {
  font-size: 40rpx;
  font-weight: 600;
  color: #ff6b35;
  margin-right: 20rpx;
}

.history-points {
  font-size: 28rpx;
  color: #666666;
}
</style>